<template>
  <div>
    <el-dialog :visible="showAlert" title="新增权限点" @close="cancelBtn">
      <el-form
        label-width="120px"
        label-position="right"
        :model="form"
        :rules="rules"
        ref="form"
      >
        <el-form-item label="权限名称" style="width: 80%" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="权限标识" style="width: 80%" prop="code">
          <el-input v-model="form.code"></el-input>
        </el-form-item>
        <el-form-item label="权限描述" style="width: 80%" prop="description">
          <el-input v-model="form.description"></el-input>
        </el-form-item>
        <el-form-item label="开启" prop="enVisible">
          <el-switch
            v-model="form.enVisible"
            active-value="1"
            inactive-value="0"
          >
          </el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="btnOK">确定</el-button>
          <el-button @click="cancelBtn">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { addPermission, getPermissionDetail,updatePermission } from "@/api/permission";
export default {
  name: "addPermission",
  data() {
    return {
      form: {
        code: "",
        description: "",
        name: "",
        enVisible: "0",
      },
      rules: {
        code: [
          { required: true, message: "权限标识不能为空", trigger: "blur" },
        ],
        name: [
          { required: true, message: "权限姓名不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    cancelBtn() {
      this.$emit("update:showAlert", false);
      this.form.code = "";
      this.form.description = "";
      this.form.enVisible = false;
      this.form.name = "";
    },
    btnOK() {
      this.$refs.form.validate(async (valid) => {
        console.log(valid);
        if (valid) {
          try {
            if (this.form.id) {
                let result = await updatePermission(this.form);
                this.$message({
                type: "success",
                message: "修改权限成功！",
              });
            } else {
              let result = await addPermission({ ...this.form, pid: this.pid });
              console.log(result);
              this.$message({
                type: "success",
                message: "添加权限成功！",
              });
            }
            this.cancelBtn();
            this.$emit("getPs");
          } catch (error) {
            this.$message({
              type: "info",
              message: "操作权限失败",
            });
          }
        } else {
          console.log("Wrong submit");
        }
      });
    },
    async getPermissionDetail(id) {
      let result = await getPermissionDetail(id);
      this.form = result;
      console.log(this.form);
    },
  },
  props: {
    showAlert: {
      type: Boolean,
    },
    pid: {},
  },
};
</script>

<style>
</style>